<template>
  <div>
    <h2>son1</h2>  
    {{ this.$store.state.name }}
    {{ cname }}
    <!-- {{name}}
    {{age}} -->
    {{ hehe }}
    <h3>mapGetters</h3>
    {{ dbAge }}
    {{ xixi }}
    </div>
</template>
<script>
import { mapState, mapGetters } from "vuex"
// console.log(mapState(["name","age"]))
// mapState 将state的数据映射到计算属性中
export default {
  data() {
    return {
      name: "午夜凶铃"
    }
  },
  //  computed: {
  //     cname() {
  //       return this.$store.state.name
  //     }
  //  }
  // computed: mapState(["name","age"]),
    computed: {
      // ...mapState(["name","age"]),
      cname() {
        return this.$store.state.name
      },
      ...mapState({
        // hehe:(state) => {
        //   console.log(state)
        //   return state.name
        // },
        // hehe: state => state.name
        hehe: "name",
      }),
      ...mapGetters(["dbAge"]),
      ...mapGetters({
        // 修改的计算属性: vuex里的getters数据
        xixi: "dbAge"
      })
    }
}
/*
mapstate  和 mapgetter 值类型的辅助函数 将数据映射到计算属性中
数组的使用方式完全一致
对象 mapstate 允许跟一个处理函数 mapgetter不行
*/
</script>
